<style lang="scss" scoped>
.main {
  background-color: #f3f2f2;
  height: calc(100vh - $tabbar-height);
  overflow: auto;

  .content-box {
    padding: 0 10px;
    margin-top: 10px;
    margin-bottom: 80px;
  }

  .left-container {
    display: flex;
    min-width: 40%;
    align-items: center;
    justify-content: center;
  }

  .right-container {
    width: 60%;
    margin-top: 30px;
    align-self: start;

    .product-price {
      display: flex;
      justify-content: space-between;
      margin-top: 30px;
      font-size: 20px;
      color: red;
    }
  }
}

.cart-item-card {
  overflow: hidden;
  box-sizing: border-box;
  align-items: center;
  width: 100%;
  min-height: 150px;
  display: flex;
  padding: 0 10px;
  margin-bottom: 10px;
}

.title-img-box {
  img {
    background-color: #0e0e0e;
    width: 100%;
  }
}

.img-box {
  margin: 0px 10px;
  width: 100px;
  height: 100px;

  img {
    background-color: #0e0e0e;
    width: 100%;
  }
}

.submit-bar {
  position: fixed;
  bottom: 50px;
  width: 100%;
  height: 50px;
  background-color: #ffffff;
  border-bottom: 1px solid #f7f7f7;
}

.slide-container {
  height: 100%;

  .delete-button {
    height: 100%;
  }
}
</style>
<template>
  <div class="main">
    <!--    头部logo栏-->
    <div class="title-img-box">
      <img src="@/assets/imgs/logo.png" />
    </div>

    <div class="content-box">
      <!--    每一个购物车商品-->
      <div v-if="cart_data.length !== 0" class="display-card cart-item-cart">
        <van-checkbox-group
          ref="cart_check_group"
          v-model="order_store.selected_cart_item"
        >
          <div v-for="item in cart_data" :key="item.id">
            <van-swipe-cell>
              <div class="display-card cart-item-card">
                <div class="left-container">
                  <!--选中的购物车商品同步进订单仓库-->
                  <van-checkbox :name="item"></van-checkbox>

                  <!--商品的图片-->
                  <div class="img-box" @click.stop="to_detail(item)">
                    <img :src="cart_item_img(item)" />
                  </div>
                </div>

                <!--右侧的名字/价格/步进器 -->
                <div class="right-container">
                  <div
                    class="van-multi-ellipsis--l2"
                    @click.stop="to_detail(item)"
                  >
                    {{ item.s_good.name }}
                  </div>
                  <div class="product-price">
                    <div @click.stop="to_detail(item)">
                      {{ format_money(item.s_good.price) }}
                    </div>
                    <div>
                      <!--改数量的时候要能够更新-->
                      <van-stepper
                        v-model="item.num"
                        @change="upadte_cart_num(item)"
                      />
                    </div>
                  </div>
                </div>
              </div>

              <!-- 滑动删除购物车商品 -->
              <template #right>
                <div class="slide-container">
                  <van-button
                    class="delete-button"
                    square
                    text="删除"
                    type="danger"
                    @click="delete_cart_item(item.id)"
                  />
                </div>
              </template>
            </van-swipe-cell>
          </div>
        </van-checkbox-group>
      </div>

      <!-- 购物车为空的提示 -->
      <van-empty v-else description="购物车空空如也~" image="search" />
    </div>
    <!--    结算栏-->
    <div v-if="cart_data.length !== 0" class="submit-bar">
      <van-submit-bar
        :price="sum_price"
        button-text="提交订单"
        class="submit-bar"
        @submit="create_order"
      >
        <van-checkbox v-model="select_all">全选</van-checkbox>
      </van-submit-bar>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {
  api_get_cart,
  api_delete_cart_item,
  api_update_cart_item,
} from "@/service/api/cart";
import { computed, onMounted, ref } from "vue";
import { use_detail_store } from "@/stores/detail-store";
import { use_order_store } from "@/stores/order-store";
import { useRouter } from "vue-router";
import { format_money } from "@/utils/format-money";
import { showToast } from "vant";

const $router = useRouter();
const detail_store = use_detail_store();
// 订单的仓库,用来存储生成订单所需要的购物车id
const order_store = use_order_store();

// 初始化购物车的数据
let cart_data: any = ref([]);
const get_cart = async () => {
  let res: any = await api_get_cart();
  if (res.code == 409) {
    localStorage.clear();
  } else {
    cart_data.value = res.result.rows;
  }
};

// 拿取每个商品图片的路径
const cart_item_img = computed(() => {
  return (item: any) => {
    return item.s_good.s_goods_photos[0].path;
  };
});

// 购物车多选功能
// 多选组件实例
const cart_check_group = ref();
// 全选,多选逻辑
let is_all_checked = ref(false);
const select_all = computed({
  get() {
    return (is_all_checked.value =
      order_store.selected_cart_item.length === cart_data.value.length);
  },
  set() {
    cart_check_group.value.toggleAll(!is_all_checked.value);
  },
});
// 计算商品总价
const sum_price = computed(() => {
  let sum_price = 0;
  if (order_store.selected_cart_item.length !== 0) {
    order_store.selected_cart_item.forEach((item) => {
      sum_price += item.num * item.s_good.price;
    });
  }

  return (sum_price *= 100);
});
const upadte_cart_num = async (item) => {
  await api_update_cart_item(item.id, { num: item.num });
};
//完成点击购物车卡返回购物车页面
const to_detail = (item: any) => {
  // 将目前的商品数据加入到仓库中,再路由跳转
  detail_store.product_detail = item.s_good;
  $router.push("details");
};

// 删除一个购物车商品
const delete_cart_item = async (id: number) => {
  let res = await api_delete_cart_item(id);
  showToast(res.msg);
  get_cart();
};

// 提交订单
const create_order = () => {
  if (order_store.selected_cart_item.length !== 0) {
    $router.push("order");
  } else {
    showToast("您还没有选择商品哦");
  }
};
onMounted(() => {
  get_cart();
});
</script>
